<template>
  <div class="article-detail">
    <el-card class="box-card">
      <!-- 添加返回按钮 -->
      <el-button class="back-button" @click="goBack">
        返回
      </el-button>
      <div class="clearfix"> 
        <!-- slot="header" -->
        <span>{{ article.title }}</span> 
      </div>
      <div class="article-author">
        <p>作者: {{ article.author }}</p>
      </div>
      
      <div class="article-info">
        <p>分类: {{ article.categoryName }}</p>
        <br>
        <p>最后操作时间: {{ article.updateTime }}</p>
      </div>
      <!-- <hr> -->
      <br>
      <!-- <div class="article-content" v-html="article.content"/> -->

      <div class="article-content">
        <p v-for="(paragraph, index) in article.content.split('\n')" :key="index">
          {{ paragraph }}
        </p>
      </div>     

      <div class="row-artandbu">

      <div class="teaching-box">
        <el-card class="analysis-box">
          <h3>分析框</h3>
          <p class="artany-box">这里可以展示一些分析结果。</p>
        </el-card>
      </div>

      <!-- 固定按钮组 -->
      <div class="fixed-buttons">
          <el-button  @click="followReading">
            跟读
          </el-button>
          <el-button  @click="startRecording">
            录音
          </el-button>
      </div>
    </div>

    </el-card>
  </div>
</template>

<script>
import { getArticleDetail } from '@/api/dish'; // 假设这里是调用API获取文章详情

export default {
  data() {
    return {
      article: {
        title: '',
        categoryName: '',
        author: '',
        updateTime: '',
        content: ''
      }
    };
  },
  created() {
    this.fetchArticleDetail();
  },
  methods: {
    async fetchArticleDetail() {
    getArticleDetail(this.$route.query.id).then(res => {
      if (res && res.data && res.data.code === 1) {
        this.article = res.data.data
        console.log(article);
      } else {
        this.$message.error(res.data.msg)
      }
    });
  },
  goBack() {
      this.$router.go(-1); // 返回上一级页面
    }
  }
};
</script>

<style scoped>
.article-detail {
  margin: 20px;
}
.article-info {
  font-size: 18px;
  margin-bottom: 20px;
}
.article-content {
  text-indent: 2em; /* 设置段首缩进2个字符 */
  line-height: 1.6;
  font-size: 20px;
  max-width: 1000px;
  /* max-height: 600px;  */
  overflow-y: auto; /* 超出部分滚动 */
  padding: 20px; /* 增加内边距 */
  background-color: #f9f9f9; /* 设置背景色以区分内容区域 */
  border-radius: 8px; /* 添加圆角效果 */
}
.clearfix {
  font-size: 35px; /* 调整标题字体大小 */
  font-weight: bold; /* 加粗标题 */
  text-align: center; /* 居中对齐 */
  display: block; /* 确保居中对齐生效 */
}
.article-author {
  font-size: 23px; /* 调整作者字体大小 */
  font-style: italic; /* 斜体显示作者 */
  text-align: center;
  margin: 30px;
}
.back-button {
  margin-bottom: 20px; /* 给按钮底部添加间距 */
}

.fixed-buttons {
  position: fixed;
  top: 620px; /* 固定在距离页面顶部620px处 */
  right: 120px; /* 固定在距离右边120px处 */
  display: flex; 
  /* flex-direction: row ; */
  gap: 100px; /* 按钮之间的间距 */
}
.analysis-box {
  position: fixed;
  top: 100px; /* 设置整个面板距离顶部的位置 */
  right: 50px; /* 设置面板距离右边的位置 */
  /* display: flex; */
  flex-direction: column;
  /* gap: 20px; 分析框和按钮之间的间距 */
  height: 500px;
  width: 400px;
}
.artandbu {
  flex-direction: column;
}
.analysis-box h3 {
  font-size: 30px;
  margin-bottom: 25px; /* 设置标题与内容之间的间隔 */
}

.artany-box {
  text-indent: 2em; /* 设置段首缩进2个字符 */
  /* line-height: 1.6; */
  font-size: 15px;
  overflow-y: auto; /* 超出部分滚动 */
  padding: 20px; /* 增加内边距 */
  background-color: #f9f9f9; /* 设置背景色以区分内容区域 */
  border-radius: 8px; /* 添加圆角效果 */
  height: 400px;
}

</style>
